import React, { useEffect, useRef, useState } from 'react';
import { Input, Button, ResponsiveGrid, Overlay } from '@alifd/next';
import { Resizable } from "re-resizable";
import styles from './index.module.scss';
const { Cell } = ResponsiveGrid;
import CardLayout from '../CardLayout';
import { observer, Provider, inject } from "mobx-react";
import CardModel, { StageStatusCurrent, StageStatusNone, StageStatusFirstChild } from '../../models/card-stage';
import { runInAction } from 'mobx';
import BreadLinks from './BreadLinks';
import { Icon } from '@alifd/next';
import { DatePicker2 } from '@alifd/next';
const { RangePicker } = DatePicker2;
const { Popup } = Overlay;
function getDateDay(dateStr) {
  let date = new Date(dateStr);
  return `${date.getMonth() + 1}/${date.getDate()}`
}
const CardStageWrap = (props: {
  routePath: string[]
}) => {
  const [cardModel, setCardModel] = useState<any>(null);
  useEffect(() => {
    if (!cardModel) {
      const _cardModel = new CardModel(props.routePath);
      _cardModel.initCardData();
      setCardModel(_cardModel);
    } else {
      cardModel.changeCurrentCardId(props.routePath[props.routePath.length - 1]);
    }
  }, [props.routePath]);
  return (
    (cardModel && cardModel.isInit) ? <Provider cardModel={cardModel}>
      <CardStage {...props} />
    </Provider> : null
  );
};
const CardStage = inject('cardModel')(observer((props) => {
  const container = useRef(null);
  const currentCardData = props.cardModel.currentCard;
  const [dateVisible, setDateVisible] = useState(false);
  return <div className={styles.stageWrap}>
    <BreadLinks routePath={props.routePath}></BreadLinks>
    <div className={styles.title} >
      <div style={{
        marginRight: '10px',
      }}>
        <Input size={'small'} disabled={props.disabled} value={props.cardModel.currentCard.title} onChange={(value) => {
          runInAction(() => {
            // console.log(JSON.stringify(cardModel.currentCard));
            props.cardModel.currentCard.title = value;
            props.cardModel.saveCurrentCard();
          });
        }} />
      </div>
      <Button.Group size={'small'}>
        <Button className="basic-button" onClick={() => {
          container.current?.updateLayout(1);
        }}>1行</Button>
        <Button className="basic-button" onClick={() => {
          container.current?.updateLayout(2);
        }}>2行</Button>
        <Button className="basic-button" onClick={() => {
          container.current?.updateLayout(3);
        }}>3行</Button>
        <Button className="basic-button" onClick={() => {
          container.current?.updateLayout(4);
        }}>4行</Button>
        <Button className="basic-button" onClick={() => {
          container.current?.updateLayout(5);
        }}>5行</Button>
      </Button.Group>
      <Popup
        v2
        canCloseByOutSideClick={false}
        trigger={
          props.cardModel.currentCard.date ? <span onClick={() => {
            console.log(currentCardData.date);
            setDateVisible(!dateVisible)
          }}>
            {getDateDay(props.cardModel.currentCard.date[0])}-{getDateDay(props.cardModel.currentCard.date[1])}
          </span> : <Icon type={'calendar'} onClick={() => {
            setDateVisible(!dateVisible)
          }} />
        } visible={dateVisible}>
        <div style={{
        }}>
          <RangePicker size={'small'} onChange={(value) => {
            currentCardData.date = value;
            props.cardModel.setCardData(props.cardModel.currentCardId, currentCardData);
            setDateVisible(false)
          }} />
        </div>
      </Popup>
    </div>
    <div className={styles.content_wrap}>
      <CardLayout ref={container} />
    </div>
  </div>
}));

export default observer(CardStageWrap);
